<style>
    .attr-group-list .attr-group-item:after {
        display: block;
        content: " ";
        height: 0;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        border-bottom: 1px solid #eee;
    }

    .attr-group-list .attr-group-item {
        margin-bottom: 1rem;
    }

    .attr-group-list .attr-group-item:last-child {
        margin-bottom: 0;
    }

    .attr-group-list .attr-group-item:last-child:after {
        display: none;
    }

    .attr-item {
        display: inline-block;
        position: relative;
        background: #fff;
        padding: .25rem .5rem;
        margin-right: 1rem;
        margin-bottom: 1rem;
        border: 1px solid #eee;
    }

    .attr-group-delete,
    .attr-item .attr-item-delete,
    .attr-row-delete-pic {
        display: inline-block;
        background: #fff;
        border: 1px solid #979797;
        color: #725755 !important;
        text-decoration: none !important;
        width: 1rem;
        height: 1rem;
        line-height: .75rem;
        text-align: center;
        transition: 150ms;
        transform: translateY(-.08rem);
    }

    .attr-group-delete:hover,
    .attr-item .attr-item-delete:hover,
    .attr-row-delete-pic:hover {
        border: 1px solid #ff4544;
        color: #fff !important;
        background: #ff4544;
    }

    td {
        cursor: default;
    }
    .input-td {
        padding: 0 .5rem !important;
        width: 8rem;
        vertical-align: middle;
    }

    .input-td input {
        display: inline-block;
        margin: 0;
        width: 100%;
        border: 1px solid #dde2e6;
        color: inherit;
        text-align: center;
        cursor: text;
        height: 28px;
    }

    .input-td input:focus {
        outline: none;
    }
    .mb-2 {
        margin-bottom: .5rem!important;
    }
    .form-inline {
        display: flex;
        flex-flow: row wrap;
        -webkit-box-align: center;
        align-items: center;
    }

</style>
<div id="app">
    <form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">课程名称:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-name" data-rule="required" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">课程售价:</label>
            <div class="col-xs-12 col-sm-8">
                <input id="c-price" data-rule="required" class="form-control" step="0.01" name="row[price]" type="number" value="{$row.price|htmlentities}">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">课程缩略图:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-cover_pic" class="form-control" size="50" name="row[cover_pic]" data-rule="required" type="text" value="{$row.cover_pic|htmlentities}">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="faupload-cover_pic" class="btn btn-danger faupload" data-input-id="c-cover_pic" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-cover_pic"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-cover_pic" class="btn btn-primary fachoose" data-input-id="c-cover_pic" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-cover_pic"></span>
                </div>
                <ul class="row list-inline faupload-preview" id="p-cover_pic"></ul>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">课程轮播图:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="input-group">
                    <input id="c-goods_pic" class="form-control" size="50" name="row[goods_pic]" data-rule="required" type="text" value="{$goods_pic|htmlentities}">
                    <div class="input-group-addon no-border no-padding">
                        <span><button type="button" id="faupload-goods_pic" class="btn btn-danger faupload" data-input-id="c-goods_pic" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="true" data-preview-id="p-goods_pic"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                        <span><button type="button" id="fachoose-goods_pic" class="btn btn-primary fachoose" data-input-id="c-goods_pic" data-mimetype="image/*" data-multiple="true"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                    </div>
                    <span class="msg-box n-right" for="c-goods_pic"></span>
                </div>
                <ul class="row list-inline faupload-preview" id="p-goods_pic"></ul>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">是否设定课程属性:</label>
            <div class="col-xs-12 col-sm-8">
                <div class="radio">
                    <label for="c-use_attr-cancel"><input id="c-use_attr-cancel" name="row[use_attr]" type="radio" value="0" v-model="model.use_attr" /> 不设定</label>
                    <label for="c-use_attr-chose"><input id="c-use_attr-chose" name="row[use_attr]" type="radio" value="1" v-model="model.use_attr" /> 设定</label>
                </div>
            </div>
        </div>
        <template v-if="model.use_attr==0">
            <div class="form-group" id="goods_num">
                <label class="control-label col-xs-12 col-sm-2">课程名额:</label>
                <div class="col-xs-12 col-sm-8">
                    <input id="c-goods_num" data-rule="required" class="form-control" step="1" name="row[goods_num]" type="number" value="{$row.goods_num|htmlentities}">
                </div>
            </div>
        </template>
<!--        <div id="use_attr_show" {eq name="$row.use_attr" value="0"} style="display: none"{/eq}>-->
            <template v-else>
                <div class="form-group">
                    <label class="control-label col-xs-12 col-sm-2">属性设置:</label>
                    <div class="col-xs-12 col-sm-8">
                        <div v-if="attr_group_list && attr_group_list.length>0"
                             class="panel mb-3" style="background: #f5f7f9">
                            <div class="panel-body">
                                <div class="attr-group-list">
                                    <div v-for="(attr_group,group_index) in attr_group_list"
                                         class="attr-group-item">
                                        <div class="mb-3">
                                            <a :data-group-index="group_index"
                                               class="attr-group-delete" href="javascript:">×</a>
                                            <b>{{attr_group.attr_group_name}}：</b>
                                            <div class="form-inline d-inline-block">
                                                <input class="form-control form-control-sm add-attr-input mr-1"
                                                       placeholder="如：课时、学科">
                                                <a class="btn btn-sm add-attr-btn btn-secondary"
                                                   :data-group-index="group_index" href="javascript:">添加值</a>
                                            </div>
                                        </div>
                                        <div class="attr-list">
                                            <div v-for="(attr,attr_index) in attr_group.attr_list"
                                                 class="attr-item">
                                                <a :data-group-index="group_index"
                                                   :data-attr-index="attr_index"
                                                   class="attr-item-delete"
                                                   href="javascript:">×</a>
                                                <span>{{attr.attr_name}}</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-inline">
                            <input class="form-control add-attr-group-input mr-2"
                                   placeholder="如：课时、学科">
                            <a class="btn add-attr-group-btn btn-default" href="javascript:">添加组</a>
                        </div>
                    </div>
                </div>

                <div class="form-group row" v-if="attr_row_list && attr_row_list.length>0">
                    <div v-if="attr_error" class="alert alert-warning rounded-0">{{attr_error}}</div>
                    <label class="control-label col-xs-12 col-sm-2">价格设置:</label>
                    <div class="col-9">
                        <div class="form-inline mb-2">
                            <label>批量设置：</label>
                            <input style="width: 6rem" class="form-control all-attr-row-price mr-2"
                                   placeholder="价格">
                            <input v-if="sp_type == 2 && model.supplier_id > 0" readonly style="width: 6rem" class="form-control all-attr-row-num mr-2"
                                   placeholder="库存" >
                            <input v-else style="width: 6rem" class="form-control all-attr-row-num mr-2"
                                   placeholder="名额" >
                            <!--<input style="width: 8rem" class="form-control all-attr-row-no mr-2"
                                   placeholder="编号">-->
                            <a class="btn btn-secondary set-all-attr-row" href="javascript:">确定</a>
                        </div>
                        <label class="control-label col-xs-12 col-sm-2"></label>
                        <table class="table table-bordered table-sm mb-0 bg-white" style="border: 1px solid #f0f0f0;width: 30%">
                            <tr>
                                <template v-for="group in attr_group_list">
                                    <th v-if="group.attr_list && group.attr_list.length>0"
                                        class="text-center col-sm-2">
                                        {{group.attr_group_name}}
                                    </th>
                                </template>
                                <th class="text-center col-sm-2">价格</th>
                                <!--                                        <th class="text-center">供货价</th>-->
                                <th class="text-center col-sm-2">名额</th>
                                <!--                                        <th class="text-center">编号</th>-->
                                <!--                                        <th class="text-center">图片</th>-->
                            </tr>
                            <tr v-for="(attr_row,row_index) in attr_row_list">
                                <td v-for="(attr,attr_index) in attr_row.attr_list"
                                    class="text-center">
                                    {{attr.attr_name}}
                                    <input :name="'attr['+row_index+'][attr_list]['+attr_index+'][attr_id]'"
                                           :value="attr.attr_id?attr.attr_id:''"
                                           type="hidden">
                                    <input :name="'attr['+row_index+'][attr_list]['+attr_index+'][attr_name]'"
                                           :value="attr.attr_name?attr.attr_name:''"
                                           type="hidden">
                                    <input
                                            :name="'attr['+row_index+'][attr_list]['+attr_index+'][attr_group_name]'"
                                            :value="attr.attr_group_name?attr.attr_group_name:''"
                                            type="hidden">
                                </td>
                                <td class="text-center input-td">
                                    <input :data-row-index="row_index"
                                           :value="attr_row.price"
                                           :name="'attr['+row_index+'][price]'"
                                           class="attr-row-price" min="0" step="0.01" type="number">
                                </td>
                                <!--<td class="text-center input-td">
                                    <input :data-row-index="row_index"
                                           :value="attr_row.supplier_price"
                                           :name="'attr['+row_index+'][supplier_price]'"
                                           class="attr-row-supplier_price" min="0" step="0.01" type="number" readonly>
                                </td>-->
                                <td class="text-center input-td">
                                    <input :data-row-index="row_index"
                                           :value="attr_row.num" v-if="sp_type == 2 && model.supplier_id > 0" readonly
                                           :name="'attr['+row_index+'][num]'"
                                           class="attr-row-num" min="0" step="1" type="number">
                                    <input :data-row-index="row_index"
                                           :value="attr_row.num" v-else
                                           :name="'attr['+row_index+'][num]'"
                                           class="attr-row-num" min="0" step="1" type="number">
                                </td>
                                <!--<td class="text-center input-td">
                                    <input :data-row-index="row_index"
                                           :value="attr_row.no"
                                           :name="'attr['+row_index+'][no]'"
                                           class="attr-row-no">
                                </td>-->
                                <!--<td class="text-center" style="vertical-align: middle">
                                    <template v-if="attr_row.pic">
                                        <div>
                                            <input :data-row-index="row_index"
                                                   :value="attr_row.pic"
                                                   :name="'attr['+row_index+'][pic]'">
                                            <img :src="attr_row.pic"
                                                 style="height: 1.5rem;width: 1.5rem;border-radius: .15rem">
                                            <a :data-row-index="row_index"
                                               class="attr-row-delete-pic"
                                               href="javascript:">×</a>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <a :data-row-index="row_index"
                                           class="btn btn-secondary btn-sm attr-row-upload-pic"
                                           href="javascript:">上传</a>
                                    </template>
                                </td>-->
                            </tr>
                        </table>
                    </div>
                </div>
            </template>
<!--        </div>-->
        <div class="form-group">
            <label class="control-label col-xs-12 col-sm-2">课程详情:</label>
            <div class="col-xs-12 col-sm-8">
                <textarea id="c-detail" class="form-control editor" rows="5" name="row[detail]" cols="50">{$row.detail|htmlentities}</textarea>
            </div>
        </div>
        <div class="form-group layer-footer">
            <label class="control-label col-xs-12 col-sm-2"></label>
            <div class="col-xs-12 col-sm-8">
                <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
                <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
            </div>
        </div>
    </form>
</div>
<!--<link rel="stylesheet" href="/assets/css/school/bootstrap.min.css">-->
<script src="/assets/js/vue.js"></script>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<script>
    var attr_data = <?php echo $attr_data ?>;
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            attr_group_list: [],
            attr_row_list: [],
            sp_type:0,
            model: [],
            attr_group_count: 0,
            attr: [],
        },
        computed: {
            attr_error: function () {
                var error = false;
                for (var i in this.attr_group_list) {
                    if (!this.attr_group_list[i].attr_list || !this.attr_group_list[i].attr_list.length) {
                        error = '规格组“' + this.attr_group_list[i].attr_group_name + '”没有值，将不会被保存';
                        break;
                    }
                }
                return error;
            },
        },
    });

    app.attr = attr_data.attr;
    app.model = attr_data.model;

    setTimeout(function () {
        app.attr_group_list = attr_data.attr_group_list;
        app.attr_row_list = attr_data.attr_row_list;
    }, 300);
    //规格组组合生成
    function attrGroupGenerate(attr_group_list) {
        if (!attr_group_list.length)
            return [];
        var result = [];
        var results = [];
        var new_group_list = [];

        for (var i in attr_group_list) {
            if (!attr_group_list[i].attr_list || !attr_group_list[i].attr_list.length)
                continue;
            var j=attr_group_list[i].attr_list.length

            if(attr_group_list[i].attr_group_name){
                for(var k=0;k<j;k++){
                    console.log(k)
                    app.attr_group_list[i].attr_list[k].attr_group_name=attr_group_list[i].attr_group_name
                }

            }
            new_group_list.push(attr_group_list[i].attr_list);
        }

        function doExchange(arr, depth) {
            if (!arr[depth])
                return;
            for (var i = 0; i < arr[depth].length; i++) {
                result[depth] = arr[depth][i];
                if (depth != arr.length - 1) {
                    doExchange(arr, depth + 1)
                } else {
                    var row = {
                        attr_list: result,
                        num: 0,
                        price: 0,
                        no: '',
                        pic: '',
                    };
                    results.push(JSON.stringify(row));
                }
            }
        }

        function test(arr) {
            doExchange(arr, 0);
        }

        test(new_group_list);
        var new_results = [];
        for (var i in results) {
            new_results.push(JSON.parse(results[i]));
        }

        return new_results;
    }

    app.attr_row_list = attrGroupGenerate(app.attr_group_list);

    //添加规格组
    $(document).on('click', '.add-attr-group-btn', function () {
        var group_name = $('.add-attr-group-input').val();
        if (group_name == '')
            return;
        var in_array = false;
        for (var i in app.attr_group_list) {
            if (app.attr_group_list[i].attr_group_name == group_name) {
                in_array = true;
                break;
            }
        }
        if (in_array)
            return;
        app.attr_group_list.push({
            attr_group_name: group_name,
            attr_list: [],
        });
        $('.add-attr-group-input').val('');
    });

    //添加规格值
    $(document).on('click', '.add-attr-btn', function () {
        var group_index = $(this).attr('data-group-index');
        var attr_name = $(this).parent().find('.add-attr-input').val();
        if (attr_name == '')
            return;
        var in_array = false;
        for (var i in app.attr_group_list[group_index].attr_list) {
            if (app.attr_group_list[group_index].attr_list[i].attr_name == attr_name) {
                in_array = true;
                break;
            }
        }
        if (in_array)
            return;
        app.attr_group_list[group_index].attr_list.push({
            attr_name: attr_name,
            attr_group_name: app.attr_group_list[group_index].attr_group_name,
        });

        // 如果是单规格的，添加新规格时不清空原先的数据
        app.old_checked_attr_list = app.attr_row_list;
        app.attr_group_count = app.attr_group_list.length;
        var attrList = attrGroupGenerate(app.attr_group_list);
        if (app.attr_group_list.length === 1) {
            for (var i in attrList) {
                if (i > app.old_checked_attr_list.length - 1) {
                    app.old_checked_attr_list.push(attrList[i])
                }
            }
            var newCheckedAttrList = app.old_checked_attr_list;
        } else if (app.attr_group_list.length === app.attr_group_count) {
            for (var pi in attrList) {
                var pAttrName = '';
                for (var pj in attrList[pi].attr_list) {
                    pAttrName += attrList[pi].attr_list[pj].attr_name
                }
                for (var ci in app.old_checked_attr_list) {
                    var cAttrName = '';
                    for (var cj in app.old_checked_attr_list[ci].attr_list) {
                        cAttrName += app.old_checked_attr_list[ci].attr_list[cj].attr_name;
                    }
                    if (pAttrName === cAttrName) {
                        attrList[pi] = app.old_checked_attr_list[ci];
                    }
                }
            }
            var newCheckedAttrList = attrList;
        } else {
            var newCheckedAttrList = attrList;
        }

        $('.add-attr-input').val('');
//        app.attr_row_list = attrGroupGenerate(newCheckedAttrList);
        app.attr_row_list = newCheckedAttrList;
    });

    //删除规格组
    $(document).on('click', '.attr-group-delete', function () {
        var group_index = $(this).attr('data-group-index');
        app.attr_group_list.splice(group_index, 1);
        app.attr_row_list = attrGroupGenerate(app.attr_group_list);
    });

    //删除规格值
    $(document).on('click', '.attr-item-delete', function () {
        var group_index = $(this).attr('data-group-index');
        var attr_index = $(this).attr('data-attr-index');
        app.attr_group_list[group_index].attr_list.splice(attr_index, 1);


        // 如果是单规格的，添加新规格时不清空原先的数据
        app.old_checked_attr_list = app.attr_row_list;
        app.attr_group_count = app.attr_group_list.length;
        var attrList = attrGroupGenerate(app.attr_group_list);
        if (app.attr_group_list.length === 1) {
            var newCheckedAttrList = [];
            for (var i in app.attr_group_list[0].attr_list) {
                var attrName = app.attr_group_list[0].attr_list[i].attr_name;
                for (j in app.old_checked_attr_list) {
                    var oldAttrName = app.old_checked_attr_list[j].attr_list[0].attr_name;
                    if (attrName === oldAttrName) {
                        newCheckedAttrList.push(app.old_checked_attr_list[j]);
                        break;
                    }
                }
            }
        } else if (app.attr_group_list.length === app.attr_group_count) {
            for (var pi in attrList) {
                var pAttrName = '';
                for (var pj in attrList[pi].attr_list) {
                    pAttrName += attrList[pi].attr_list[pj].attr_name
                }
                for (var ci in app.old_checked_attr_list) {
                    var cAttrName = '';
                    for (var cj in app.old_checked_attr_list[ci].attr_list) {
                        cAttrName += app.old_checked_attr_list[ci].attr_list[cj].attr_name;
                    }
                    if (pAttrName === cAttrName) {
                        attrList[pi] = app.old_checked_attr_list[ci];
                    }
                }
            }
            var newCheckedAttrList = attrList;
        } else {
            var newCheckedAttrList = attrList;
        }

//        app.attr_row_list = attrGroupGenerate(app.attr_group_list);
        app.attr_row_list = newCheckedAttrList;
    });

    //规格价格修改
    $(document).on('input', '.attr-row-price', function () {
        var row_index = $(this).attr('data-row-index');
        app.attr_row_list[row_index].price = $(this).val();
    });

    //规格库存修改
    $(document).on('input', '.attr-row-num', function () {
        var row_index = $(this).attr('data-row-index');
        app.attr_row_list[row_index].num = $(this).val();
    });

    //规格编号修改
    $(document).on('input', '.attr-row-no', function () {
        var row_index = $(this).attr('data-row-index');
        app.attr_row_list[row_index].no = $(this).val();
    });

    //批量设置价格、库存、编号
    $(document).on('click', '.set-all-attr-row', function () {
        var price = parseFloat($('.all-attr-row-price').val()).toFixed(2);
        var num = parseInt($('.all-attr-row-num').val());
        var no = $.trim($('.all-attr-row-no').val());
        for (var i in app.attr_row_list) {
            if (price !== '' && !isNaN(price))
                app.attr_row_list[i].price = price;
            if (num !== '' && !isNaN(num))
                app.attr_row_list[i].num = num;
            if (no !== '')
                app.attr_row_list[i].no = no;
        }
        $('.all-attr-row-price').val('');
        $('.all-attr-row-num').val('');
        $('.all-attr-row-no').val('');
    });

    //规格图片上传
    $(document).on('click', '.attr-row-upload-pic', function () {
        var btn = $(this);
        var index = $(this).attr('data-row-index');
        $.upload_file({
            accept: 'image/*',
            start: function () {
                btn.btnLoading('上传中');
            },
            success: function (res) {
                if (res.code == 0) {
                    app.attr_row_list[index].pic = res.data.url;
                } else {
                    $.alert({
                        content: res.msg,
                    });
                }
            },
            complete: function () {
                btn.btnReset();
            }
        });
    });
</script>
